<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="connection">连接</button>
    <button id="send">发送</button>
    <div id="content"></div>
  </body>
  <script>
    const conBth = document.querySelector("#connection");
    const sendBth = document.querySelector("#send");
    const con = document.querySelector('#content')
    let ws = null;
    conBth.addEventListener("click", () => {
      ws = new WebSocket("ws://127.0.0.1:9998");

      ws.onopen = () => {
        console.log("服务器已连接");
      };

      ws.onclose = () => {
        console.log("服务器错误");
      };
      ws.onmessage = (msg) => {
        console.log("服务端发送数据:", msg.data);
        con.innerHTML = msg.data
      };
    });
    sendBth.addEventListener("click", () => {
      ws.send(
        JSON.stringify({
          action: "themeChange",
          socketType: "themeChange",
          chartName: "",
          value: "chalk",
        })
      );
    });
  </script>
</html>
